<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="wb/css/mui.min.css">
	<link rel="stylesheet" href="css/app.css">
	<link rel="stylesheet" href="css/mui.picker.min.css">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/index.css">
	<title>老师订单列表</title>
	<style>
		body{
			background: rgb(229,229,229);
		}
		.mylistbox{
			margin-top: 0;
		}
		.swal-title:not(:last-child){
			font-size: 2rem;
		}
		.swal-footer{
			text-align: center;
		}

	</style>
</head>
<body>
	<div class="lists-header" style="position: relative;z-index: 100;width: 100%;padding: 0 5px;">
		<div class="mylists" style="border-bottom: 1px solid black;">
			<div class="payinfo-header mylists-header">
				<div class="headerimg">
					<img src="images/head.jpg" alt="" class="teacher-order-head-img">
				</div>
				<div class="payheader-words mylists-words">
					<p class="info-ke">李老师 高中数学 <span class="teacher-money">￥<b class="teacher-time-money">300</b>/小时、<b class="teacher-time-times">2</b>小时/课时</span></p>
					<p class="teacher-info-name">徐保勇老师<img class="teacher-name-ok" src="images/name.png" alt=""><span class="teacher-ke-times">课次：<b class="teacher-times-all">10</b>次</span></p>
					<p class="info-teacher mylists-phone"><i class="glyphicon glyphicon-earphone"></i>15888888888 <span class="teacher-tolmoney">总金额：<b class="teacher-all-money"></b>元</span></p>
				</div>
			</div>
			<p class="mylists-edit-toggle this-teacher-color">联系人姓名：张小宝<span class="mylists-name">电话：15888888888</span></p>
			<p class="mylists-edit-toggle this-teacher-color">下单时间：2014-25-30 15:22:36</p>
			<p class="mylists-edit-toggle this-teacher-color">订单编号：1526222335</p>
			<p class="mylists-edit-toggle this-teacher-color noborder-bom">上课地址：北京牛津堂大学府</p>
		</div>
	</div>
	<div class="container">
		<div class="mylistbox">
			
			<div class="mylists-box" id="mylistsbox">
				<div class="mui-scroll" id="mui-scroll" style="position: relative;">


					<!-- <div class="mylists">
						<p class="mylists-server"><span class="mylists-server-num">服务编号：559562626</span><span class="mylists-server-time">2小时</span><span class="mylists-server-ing">已结束</span></p>
						<div class="mylists-sure the-teacher-bottom">
							<div class="mylists-sure-left">
								<p class="mylists-edit-sure">上课时间：2017-08-09 15:55</p>
								<p class="mylists-edit-sure">确认时间：2017-08-09 15:55</p>
							</div>
						</div>
						<div class="jiesuan-number">
							<p class="mylists-edit-sure">结算批次号：<span>12454512121</span></p>
						</div>
					</div>
					<div class="mylists">
						<p class="mylists-server"><span class="mylists-server-num">服务编号：559562626</span><span class="mylists-server-time">2小时</span><span class="mylists-server-ing">已结束</span></p>
						<div class="mylists-sure the-teacher-bottom">
							<div class="mylists-sure-left">
								<p class="mylists-edit-sure">上课时间：2017-08-09 15:55</p>
							</div>
						</div>
						<div class="jiesuan-number">
							<p class="mylists-edit-sure">结算批次号：<span>未结算</span></p>
						</div>
					</div>
					<div class="mylists">
						<p class="mylists-server"><span class="mylists-server-num">服务编号：559562626</span><span class="mylists-server-time">2小时</span><span class="mylists-server-ing">课程结束</span></p>
						<div class="mylists-sure">
							<div class="mylists-sure-left">
								<p class="mylists-edit-sure">上课时间：2017-08-09 15:55</p>
							</div>
							<div class="mylists-sure-right">
								<p style="line-height: 25px;">等待家长确认</p>
							</div>
						</div>
					</div>
					<div class="mylists">
						<p class="mylists-server"><span class="mylists-server-num">服务编号：559562626</span><span class="mylists-server-ing">未上课</span></p>
						<div class="mylists-sure">
							<div class="mylists-sure-left">
								<p class="mylists-edit-sure">2小时</p>
							</div>
							<div class="mylists-sure-right teacher-button-times">
								<button onclick="showDate()" data-options='{"value":"2018-01-30 10:10","beginYear":2010,"endYear":2088}'>开始上课</button>
							</div>
						</div>
					</div> -->
					


				</div>
			</div>
				
			
		</div>
	</div>
</body>
<script src="js/jquery.js"></script>
<script src="js/sweetalert.min.js"></script>
<script src="wb/js/mui.min.js"></script>
<script src="js/mui.picker.min.js"></script>
<script>

	var mymoney = parseInt($('.teacher-time-money').html());
	var mytimes = parseInt($('.teacher-time-times').html());
	var alltimes = parseInt($('.teacher-times-all').html());
	$('.teacher-all-money').html(mymoney*mytimes*alltimes);

	$(function(){
		document.getElementById('mylistsbox').style.height = window.screen.availHeight - $('.lists-header').height() - 15 +'px';
		pulluptoRefresmui();

	})

	function pulluptoRefresmui() {
		//加载下一个页面
		mui.init({
			pullRefresh: {
				container: '#mylistsbox',
				up: {
					height: 50, // 可选.默认50.触发上拉加载拖动距离
					callback: pullupRefresh,
					contentrefresh: '正在刷新...',
					auto: true
				}
			}
		});
		//上拉加载回调方法
		function pullupRefresh() {
	//		if(pageNo > totalpage) {
	//			mui.toast('没有更多数据了！');
	//		}
			setTimeout(function() {
				mui('#mylistsbox').pullRefresh().endPullupToRefresh();
	//			if(totalpage >= pageNo) {
					method();
	//			}
			}, 200);
		}
	}
	function method(){
		var str = '<div class="mylists"><p class="mylists-server"><span class="mylists-server-num">服务编号：559562626</span><span class="mylists-server-time">2小时</span><span class="mylists-server-ing">已结束</span></p><div class="mylists-sure the-teacher-bottom"><div class="mylists-sure-left"><p class="mylists-edit-sure">上课时间：2017-08-09 15:55</p><p class="mylists-edit-sure">确认时间：2017-08-09 15:55</p></div></div><div class="jiesuan-number"><p class="mylists-edit-sure">结算批次号：<span>12454512121</span></p></div></div><div class="mylists"><p class="mylists-server"><span class="mylists-server-num">服务编号：559562626</span><span class="mylists-server-time">2小时</span><span class="mylists-server-ing">已结束</span></p><div class="mylists-sure the-teacher-bottom"><div class="mylists-sure-left"><p class="mylists-edit-sure">上课时间：2017-08-09 15:55</p></div></div><div class="jiesuan-number"><p class="mylists-edit-sure">结算批次号：<span>未结算</span></p></div></div><div class="mylists"><p class="mylists-server"><span class="mylists-server-num">服务编号：559562626</span><span class="mylists-server-time">2小时</span><span class="mylists-server-ing">课程结束</span></p><div class="mylists-sure"><div class="mylists-sure-left"><p class="mylists-edit-sure">上课时间：2017-08-09 15:55</p></div><div class="mylists-sure-right"><p style="line-height: 25px;">等待家长确认</p></div></div></div><div class="mylists"><p class="mylists-server"><span class="mylists-server-num">服务编号：559562626</span><span class="mylists-server-ing">未上课</span></p><div class="mylists-sure"><div class="mylists-sure-left"><p class="mylists-edit-sure">2小时</p></div><div class="mylists-sure-right teacher-button-times"><button onclick="showDate(this)" data-options= \'{"value":"2018-01-30 10:10","beginYear":2010,"endYear":2088} \'>开始上课</button></div></div></div>';

		$('.mui-scroll').append(str);
		
	}

	function showDate(control){
			var that=control;
			mui.init();
			var mybuttons = $(that);
			var optionsJson = that.getAttribute('data-options') || '{}';
			var options = JSON.parse(optionsJson);
			var id = that.getAttribute('id');
			var picker = new mui.DtPicker(options);
			
			picker.show(function(rs) {
			
				// console.log(rs.value);
				mybuttons[0].innerText = "修改时间";
				mybuttons.closest('.mylists').find('.mylists-server-ing').html("等待上课");
				mybuttons.closest('.mylists').find('.mylists-edit-sure').html("上课时间："+rs.value);
			
				picker.dispose();
			});

		}
</script>
</html>